<template>
  <div>
    <Header></Header>
    <Leader></Leader>
    <div class="category_content">
      <div class="wrapper">
        <!-- 左边分类导航盒子 -->
        <div class="left">
          <CategoryNav></CategoryNav>
        </div>
        <!-- 右边文章列表 -->
        <div class="right">
          <div class="top">
            <h3>{{ name }}</h3>
          </div>
          <div class="bottom">
            <!-- 头部 -->
            <div class="header">
              <div class="left1">标题</div>
              <div class="center1">发布人</div>
              <div class="right1">日期</div>
            </div>
            <!-- 文章列表 -->
            <div class="article_list">
              <ul v-if="total > 0">
                <li v-for="item in articles" :key="item.id">
                  <span class="title" @click="toArticle(item.id)"
                    ><img src="../assets/yxtx/aticel_logo.jpg" alt="" />{{
                      item.title
                    }}</span
                  >
                  <span class="author">{{ item.baseUser.realname }}</span>
                  <span class="publishtime">{{
                    item.publishTime | fmtDate
                  }}</span>
                </li>
              </ul>
              <div v-else style="text-align: center; color: red">暂无数据</div>
            </div>
            <!-- 分页查询 -->
            <div class="pageQuery">
              <el-pagination
                class="page"
                background
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.page"
                :page-sizes="[15, 10, 5]"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import CategoryNav from "@/components/CategoryNav.vue";
export default {
  data() {
    return {
      name: "",
      id: "",
      categories: [],
      params: {
        page: 1,
        pageSize: 15,
      },
      articles: [],
      total: 0,
    };
  },
  components: {
    CategoryNav,
  },
  methods: {
    // 获取所有新闻分类
    async getCategories() {
      let res = await get("/index/article/findCategoryArticles");
      this.categories = res.data;
      // console.log(this.categories);
    },
    // 根据接收到的id，分页查询所有该类别的文章
    async getArticlesById() {
      this.params.categoryId = this.id;
      let res = await get("/index/article/pageQuery", this.params);
      this.articles = res.data.list;
      // console.log(this.articles);
      this.total = res.data.total;
    },
    // 当前页面文章数量发生改变时
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      // 改变pageSize默认回到第一页
      this.params.page = 1;
      // 从新发送请求
      this.getArticlesById();
    },
    // 当前页码发生改变时
    handleCurrentChange(page) {
      this.params.page = page;
      // 从新发送请求
      this.getArticlesById();
    },
    // 跳转到文章详情页
    toArticle(id) {
      this.$router.push({
        path: "/list",
        query: { id },
      });
    },
  },
  watch: {
    // 监听name和id的改变
    "$route.query": {
      handler() {
        // 监听name
        this.name = this.$route.query.name;
        // 监听id
        this.id = this.$route.query.id;
        // 重新获取该类别的文章列表
        this.getArticlesById();
      },
      deep: true, //深度监听
    },
  },
  created() {
    // 获取分类名称
    this.name = this.$route.query.name;
    // 获取分类id
    this.id = this.$route.query.id;
    // 获取文章分类
    this.getCategories();
    // 获取分页查询数据
    this.getArticlesById();
  },
};
</script>

<style lang="less" scoped>
.category_content {
  margin-top: 30px;
  margin-bottom: 30px;
  .wrapper {
    display: flex;
    justify-content: space-between;
    .left {
      width: 260px;
      height: 275px;
      border: 1px solid #e5e5e5;
      .top {
        width: 100%;
        height: 55px;
        background-color: #be5b24;
        .logo {
          overflow: hidden;
          display: inline-block;
          width: 40px;
          img {
            float: right;
            margin-right: 8px;
          }
        }
        h3 {
          display: inline-block;
          color: #fff;
          width: 220px;
          height: 55px;
        }
      }
      .bottom {
        box-sizing: border-box;
        padding: 20px;
        ul {
          li {
            font-size: 16px;
            color: #333;
            font-family: "微软雅黑";
            line-height: 35px;
            border-bottom: 1px solid #e5e5e5;
            img {
              width: 16px;
              height: 16px;
              vertical-align: middle;
            }
          }
          li:hover {
            text-decoration: underline 1.5px solid #990000;
            color: #990000;
            cursor: pointer;
          }
        }
      }
    }

    .right {
      box-sizing: border-box;
      width: 915px;
      height: 800px;
      // background-color: pink;
      border: 1px solid #e5e5e5;
      .top {
        box-sizing: border-box;
        height: 42px;
        border-bottom: 1px solid #e5e5e5;
        padding-top: 9px;
        h3 {
          padding: 0;
          margin: 0;
          color: #333;
          padding-left: 15px;
          border-left: 4px solid #be5b24;
          font-size: 16px;
          margin-left: 10px;
        }
      }
      .bottom {
        .header {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          width: 100%;
          height: 40px;
          background-color: #f9f9f9;
          padding: 0 20px;
          font-size: 14px;
          color: #000;
          line-height: 40px;
          text-align: center;
          font-family: "宋体";
          .left1 {
            width: 635px;
            height: 100%;
          }
          .center1 {
            width: 112px;
            height: 100%;
          }
          .right1 {
            width: 86px;
            height: 100%;
          }
        }
        // 文章标题了列表
        .article_list {
          overflow: hidden;
          ul {
            box-sizing: border-box;
            padding: 0 20px;
            width: 913px;
            li {
              width: 100%;
              height: 40px;
              line-height: 40px;
              float: left;
              border-bottom: 1px dashed #dcdcdc;
              font-size: 16px;
              color: #333;
              display: flex;
              justify-content: space-between;

              .title {
                width: 612px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                img {
                  width: 7px;
                  height: 7px;
                  vertical-align: middle;
                  margin-right: 7px;
                }
              }
              .author {
                font-size: 14px;
                width: 114px;
                margin-right: -80px;
              }
              .publishtime {
                font-size: 14px;
                width: 78px;
              }
            }
            li:hover .title {
              text-decoration: underline 1.5px solid #990000;
              color: #990000;
              cursor: pointer;
            }
          }
        }
        // 分页
        .pageQuery {
          overflow: hidden;
          text-align: center;
          width: 100%;
          height: 98px;
          // background: pink;
          .page {
            margin-top: 33px;
            ul {
              li {
                background-color: #be5b24;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
/deep/ .el-pager {
  .active {
    background-color: #be5b24 !important;
    color: #ffffff;
  }
}

/deep/ .el-select-dropdown__item {
  .selected {
    color: #be5b24 !important;
    font-size: 50px;
  }
}

/deep/.el-input__inner {
  border-color: #be5b24 !important;
}
</style>